<template>
    <div class="cityBody">
      <template>
        <el-select style="width: 150px" v-model="province" placeholder="请选择" @change="choiceProvince" :size="size">
          <el-option
            v-for="item in provinces"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <div class="_hr">-</div>
      <template>
        <el-select style="width: 150px" v-model="city" placeholder="请选择" @change="choiceCity" :size="size">
          <el-option
            v-for="item in citys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <div class="_hr">-</div>
      <template>
        <el-select style="width: 150px" v-model="area" @change="getAreaLabel" placeholder="请选择" :size="size">
          <el-option
            v-for="item in areas"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </div>
</template>

<script>
import provinceJs from "@/utils/province";
import cityJs from "@/utils/city";
import areaJs from "@/utils/area";

export default {
  name: "index",
  components: {},
  props: [
    "provinceC",
    "cityC",
    "areaC",
    "size"
  ],
  data() {
    return {
      province: this.provinceC,
      city: this.cityC,
      area: this.areaC,
      cityName: "",
      proName: "",
      areaName: "",
      success: 1,
      citys: [],
      areas: [],
      provinces: provinceJs,
      cityAr: cityJs,
      areasAr: areaJs
    };
  },
  created() {
    if (this.province) {
      this.citys.length = 0;
      this.areas.length = 0;
      const proVal = this.province;
      for (let i = 0; i < this.cityAr.length; i += 1) {
        const cityArr = this.cityAr[i];
        for (let j = 0; j < cityArr.length; j += 1) {
          const cityObj = cityArr[j];
          if (cityObj.value.substr(0, 2) == proVal) {
            this.citys.push(cityObj);
            this.getProvinceLabel(proVal);
          }
        }
      }
    }
    if (this.city) {
      const cityVal = this.city;
      for (let i = 0; i < this.areasAr.length; i += 1) {
        const areasArr = this.areasAr[i];
        for (let j = 0; j < areasArr.length; j += 1) {
          const areaArr2 = areasArr[j];
          for (let z = 0; z < areaArr2.length; z += 1) {
            const areaObj = areaArr2[z];
            if (areaObj.value.substr(0, 4) == cityVal) {
              this.areas.push(areaObj);
              this.getCityLabel(cityVal)
            }
          }
        }
      }
    }
  },
  methods: {
    choiceProvince() {
      this.city = "";
      this.area = "";
      this.citys.length = 0;
      this.areas.length = 0;
      const proVal = this.province;
      for (let i = 0; i < this.cityAr.length; i += 1) {
        const cityArr = this.cityAr[i];
        for (let j = 0; j < cityArr.length; j += 1) {
          const cityObj = cityArr[j];
          if (cityObj.value.substr(0, 2) == proVal) {
            this.citys.push(cityObj);
            this.choiceCity()
            this.getProvinceLabel(proVal);
          }
        }
      }
    },
    choiceCity() {
      this.area = "";
      this.areas.length = 0;
      const cityVal = this.city;
      for (let i = 0; i < this.areasAr.length; i += 1) {
        const areasArr = this.areasAr[i];
        for (let j = 0; j < areasArr.length; j += 1) {
          const areaArr2 = areasArr[j];
          for (let z = 0; z < areaArr2.length; z += 1) {
            const areaObj = areaArr2[z];
            if (areaObj.value.substr(0, 4) == cityVal) {
              this.areas.push(areaObj);
              // this.choiceArea();
              this.getCityLabel(cityVal)
            }
          }
        }
      }
    },
    // 获取省名--通过省value
    getProvinceLabel(value) {
      let proName = "";
      for (let i = 0; i < this.provinces.length; i += 1) {
        const proObj = this.provinces[i];
        if (proObj.value == value) {
          proName = proObj.label
        }
      }
      this.proName = proName;
      return proName
    },
    // 获取市名--通过市value
    getCityLabel(val) {
      let cityLabel;
      for (let i = 0; i < this.cityAr.length; i += 1) {
        const cityArr = this.cityAr[i];
        for (let j = 0; j < cityArr.length; j += 1) {
          const cityObj = cityArr[j];
          if (cityObj.value == val) {
            cityLabel = cityObj.label
          }
        }
      }
      this.cityName = cityLabel;
      if (this.area) {
        this.getAreaLabel()
      }
      return cityLabel
    },
    // 获取区名--通过区value
    getAreaLabel() {
      let areaLabel;
      for (let i = 0; i < this.areasAr.length; i += 1) {
        const areaArr1 = this.areasAr[i];
        for (let j = 0; j < areaArr1.length; j += 1) {
          const areaArr2 = areaArr1[j];
          for (let z = 0; z < areaArr2.length; z += 1) {
            const areaObj = areaArr2[z];
            if (areaObj.value == this.area) {
              areaLabel = areaObj.label
            }
          }
        }
      }
      
      this.areaName = areaLabel;
      this.success += 1;
      return areaLabel
    }
  },
  watch: {
    province(val) {
      this.$emit("changeProvince", val);
    },
    city(val) {
      this.$emit("changeCity", val);
    },
    area(val) {
      this.$emit("changeArea", val);
    },
    success() {
      const data = [];
      data.push(this.proName);
      data.push(this.cityName);
      data.push(this.areaName);
      console.log(data, 123)
      this.$emit("success", data)
    }
  }
};
</script>

<style lang="scss" scoped>
  .cityBody {
    display: flex;
    flex-direction: row;
  }
  ._hr {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
  }
</style>
